<template>
	<view class="wxpup">
		<view class="shade" v-show="showPup" @click="hidePop">
			<view class="pop" :style="popStyle" :class="{'show':showClass}">
				<view v-for="(item,index) in navList" :key="index" @click="change(item)">
					<m-icon type="icon-fuzhi" size="42" color="#fff" v-if="item.text == '复制'"></m-icon>
					<m-icon type="icon-shanchu" size="42" color="#fff" v-if="item.text == '删除'"></m-icon>
					<m-icon type="icon-icon-test" size="42" color="#fff" v-if="item.text == '引用'"></m-icon>
					<text style="margin-top: 4px;">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		name: 'wxpup',
		props: {
			wxPupData: {
				type: Object,
				required: true,
				default: 1
			},
		},
		data() {
			return {
				popStyle: "",
				showPup: false,
				showClass: false,
				winSize: {},
			}
		},
		watch: {
			wxPupData(e, oldVal) {
				let [touches, style, index, ] = [e.touches[0], "", e.currentTarget.dataset.index];
				console.log('touches==>', touches)
				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				style = `top:${touches.clientY-100}px;`;
				style += `right:${this.winSize.witdh-touches.clientX-50}px`;

				// style：计算出弹窗在页面显示的位置
				this.popStyle = style;
				console.log('this.popStyle===>', this.popStyle)

				/*
				 * 计算时长，m<2：2分钟以内可以撤回，用户id用来判断只能撤回我自己发送的内容
				 * type：0删除，1撤回，2转发，3预览，4下载，5收藏，6取消收藏，
				 * navList：可根据数据信息，自行组合navList需要显示的内容。
				 */
				let timestamp = Date.parse(new Date());
				let start = e.item.ctime * 1000; //2017-4-10 10:00
				let end = timestamp; //2017-5-10 10:00
				let utc = end - start;
				let m = (utc / (60 * 1000)).toFixed(0);
				// if(e.item.user_id == e.my_user_id && m<2){
				// 	this.navList = [{text: '预览',type:3},{text: '删除',type:0}, {text: '撤回',type:1}]
				// }else{
				// 	this.navList = [{text: '预览',type:3},{text: '删除',type:0}]
				// }
				// 显示弹窗
				this.showPup = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showClass = true;
					}, 10);
				});
			},
		},
		computed: {
			// 操作列表
			navList() {
				return [
					{ text: '复制', type: 1 },
					// { text: '删除', type: 2 },
					{ text: '引用', type: 3 },
				]
			}
		},
		mounted() {
			this.getWindowSize();
			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif
		},
		methods: {
			...mapMutations({
				DELETE_MSG: 'chat/DELETE_MSG',
			}),
			/*
			 * change(item)
			 * item.type：1 复制  2 删除  3 引用
			 */
			change(item) {
				console.log(item.type, item.text);
				let msgObj = JSON.parse(this.wxPupData.item['sencmsgcontent']);
				msgObj.id = this.wxPupData.item['id'];
				// 根据type和msg_type来判断具体需要调用下方哪个方法。
				if (item.type == 1) {
					this.copyText(msgObj['content']);
				}
				if (item.type == 2) {
					console.log('msgObj====>', msgObj);
					this.msgDelete(msgObj['id'])
				}
				if(item.type==3){
					this.$emit('referenceMsg',msgObj['id'])
				}
				this.hidePop()
			},
			// 删除
			msgDelete(id) {
				this.DELETE_MSG(id)
				// this.$http.post("/api/***", {
				// 	id: this.wxPupData.item.id,
				// 	session_id: this.wxPupData.item.session_id,
				// }).then(res => {
				// 	if (res.code == 1) {
				// 		this.$emit('getNewList')
				// 	}
				// })
			},
			// 复制文本
			copyText(content) {
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			// 图片操作
			changeImg(type) {
				if (type == 3) {
					// 图片预览
					let arr = [];
					arr.push(this.$imgUrl + this.wxPupData.item.content)
					uni.previewImage({
						urls: arr,
					});
				} else if (type == 4) {
					// 图片下载
					// #ifdef H5
					location.href = this.$imgUrl + this.wxPupData.item.content;
					// #endif
					// #ifdef APP-PLUS
					this.$saveImageToPhotosAlbum(this.$imgUrl + this.wxPupData.item.content)
					// #endif
				}
			},
			// 文件视频操作
			changeFile(type) {
				if (type == 4) {
					// 下载
					// #ifdef H5
					location.href = this.$imgUrl + this.wxPupData.item.content;
					// #endif

					// #ifdef APP-PLUS
					uni.showLoading({
						title: '正在下载'
					});
					var url = this.$imgUrl + this.wxPupData.item.content;
					let dtask = plus.downloader.createDownload(url, {
						//本地路径开头使用file://，跟上手机文件本地目录storage/emulated/0，这时用户文件管理器能看到的了，之后创建连信作为文件夹，后缀是用于文件命名和格式修改，大家可以使用变量。
						filename: "file://storage/emulated/0/我的APP/" + this.wxPupData.item
							.file_name //利用保存路径，实现下载文件的重命名
					}, (d, status) => {
						//d为下载的文件对象
						if (status == 200) {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '已保存到文件夹：/我的APP/' + this.wxPupData.item.file_name, //保存路径
								duration: 3000,
							});
							//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
							let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
							setTimeout(() => {
								plus.runtime.openFile(d.filename); //选择软件打开文件
							}, 1500)
						} else {
							//下载失败
							uni.hideLoading();
							plus.downloader.clear(); //清除下载任务
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '下载失败，请稍后重试',
							});
						}
					})
					dtask.start();
					// #endif
				}
			},

			// 撤回
			msgRevoke() {
				this.$http.post("/api/***", {
					id: this.wxPupData.item.id,
				}).then(res => {
					if (res.code == 1) {
						this.$emit('getNewList')
					}
				})
			},

			// 收藏
			msgFavAdd() {
				this.$http.post("/api/***", {
					msg_id: this.wxPupData.item.id,
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '收藏成功',
						});
						this.$emit('getNewList');
					}
				})
			},
			// 取消收藏
			msgFavCancel() {
				this.$http.post("/api/***", {
					msg_id: this.wxPupData.item.msg_id,
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '已取消',
						});
						this.$emit('getNewList');
					}
				})
			},

			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},
			/* 隐藏弹窗 */
			hidePop() {
				this.showClass = false;
				this.showPup = false;
			},
		}
	}
</script>
<style lang="scss" scoped>
	.wxpup {

		/* 遮罩 */
		.shade {
			position: fixed;
			z-index: 1000;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			-webkit-touch-callout: none;

			.pop {
				position: fixed;
				z-index: 10000;
				color: #333;
				background: #596084;
				border-radius: 12rpx;
				transition: transform 0.15s ease-in-out 0s;
				user-select: none;
				-webkit-touch-callout: none;
				transform: scale(0, 0);
				display: flex;
				align-items: center;

				&.show {
					transform: scale(1, 1);
				}

				&>uni-view {
					width: 120rpx;
					height: 140rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					uni-image {
						width: 36rpx;
						height: 36rpx;
						display: block;
						margin: 0 auto 8rpx;
					}

					uni-text {
						display: block;
						font-size: 26rpx;
						color: #fff;
					}
				}
			}
		}
	}
</style>